<template>
  <div class="loginpage">
    <div class="login-logo"></div>
    <div class="login-header">
      <el-tabs
        class="tab-position"
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          @click="changeLoginWay('login')"
          label="登录"
          name="login"
        ></el-tab-pane>
        <el-tab-pane
          @click="changeLoginWay('register')"
          label="注册"
          name="register"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="login-input" v-if="loginway === 'login'">
      <el-form :label-position="labelPosition" label-width="80px" :model="form">
        <el-form-item label="用户名">
          <el-input
            name="register_name"
            placeholder="选一个昵称"
            v-model="username"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            name="register_password"
            placeholder="密码"
            v-model="password"
          ></el-input>
        </el-form-item>
        <div class="login-btn-inline">
          <el-checkbox
            label="记住密码"
            @click="checked = !checked"
            name="type"
          ></el-checkbox>
          <el-button type="primary" size="medium" @click="verify"
            ><span>登录</span></el-button
          >
        </div>
      </el-form>
    </div>
    <div class="login-input" v-if="loginway === 'register'">
      <el-form :label-position="labelPosition" label-width="80px" :model="form">
        <el-input
          type="text"
          name="email_adress"
          placeholder="你的邮件地址"
        ></el-input>
        <el-input
          type="text"
          name="sign_in[name]"
          placeholder="手机号码/电子邮件"
        ></el-input>
        <el-input
          type="password"
          name="sign_in[password]"
          placeholder="密码"
        ></el-input>
        <el-button  type="submit">
          注册
        </el-button>
        <p class="register_text">
          点击 “注册” 或下方社交登录按钮，即表示您同意并愿意遵守简书
          <a href="#">用户协议</a> 和 <a href="#">隐私政策</a> 。
        </p>
      </el-form>
    </div>
    <div class="login-way">
      <h5>您还可以通过以下方式登录</h5>
      <ul>
        <li ><i class="fa fa-qq"></i>&nbsp;&nbsp;</li>
        <li ><i class="fa fa-weibo"></i>&nbsp;&nbsp;</li>
        <li ><i class="fa fa-wechat"></i>&nbsp;&nbsp;</li>
        <li ><i class="fa fa-google-plus">&nbsp;&nbsp;</i></li>
        <li ><i class="fa fa-github"></i>&nbsp;&nbsp;</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    let checked = `true`;
    let username;
    let password;
    return { checked, username, password };
  },
  computed: mapState({
    loginway: state => state.login.loginway,
    user: state => state.login.user,
    loginSuccess: state => state.app.loginSuccess
  }),
  methods: {
      handleClick(tab, event) {
          console.log(tab, event);
          if (tab.name===`register`) {
           this.$router.replace(`/register`);
          }else{
              this.$router.replace('/login')
          }
      },
    changeLoginWay: function(str) {
      this.$store.dispatch(`changeLoginWay`, str);
    },
    verify: function() {
      if (this.username === user.name && this.password === user.password) {
        loginSuccess = `true`;
      } else {
        alert(`密码错误,请重试`);
      }
    }
  }
};
</script>
<style>
body {
  background: #f1f1f1;
}
li{
  list-style: none;
}
.loginpage {
  margin: 50px auto;
  padding: 30px 40px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
  vertical-align: middle;
  max-width: 500px;
  min-height: 400px;
  background: #ffffff;
}

.login-btn-inline {
  margin: 0 100px;
}

.tab-position {
  margin: 0 100px;
}
  .login-way ul{
    width: auto;
  }
  .login-way ul li{
    float: left;
    list-style: none;
  }
</style>
